<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>雕刻时光</title>
		<link rel="stylesheet" type="text/css" href="swiper-4.5.0/dist/css/swiper.min.css" />
		<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/new_file1.css" />
	</head>
	<body>
		<!--导航-->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
  	<img src="img/m_logo.png"/>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
    </ul>
    <form class="form-inline">
		    <ul>
		    	<li>
		    		<a href="#">首页</a>
		    	</li>
		    	<li>
		    		<a href="#">咖啡·coffee</a>
		    	</li>
		    	<li>
		    		<a href="#">咖啡馆·S.I.T.cafe</a>
		    	</li>
		    	<li>
		    		<a href="#">咖啡学院·S.I.T.coffee college</a>
		    	</li>
		    	<li>
		    		<a href="#">咖啡·S.I.T</a>
		    	</li>
		    </ul>
		  </form>
  </div>
</nav>
		<!--轮播-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="img/20171016050300541.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/20171016050311216.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/20171016050327421.jpg" />
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<!--<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>-->

			<!-- 如果需要滚动条 -->
			<!--<div class="swiper-scrollbar"></div>-->
		</div>
		<!--导航-->
		<div class="nav">
			<div class="nav-top">
				<ul>
					<li>
						<a href="#">咖啡·coffee</a>
						<span>
							/
						</span>
						<div class="nav-list">
							<ul>
								<li>
									<a href="new product launch_index.html">当季新品</a>
								</li>
								<li>
									<a href="#">咖啡产品</a>
								</li>
								<li>
									<a href="#">产品展示</a>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="#">咖啡馆·S.I.T.cafe</a>
						<div class="nav-list">
							<ul>
								<li>
									<a href="#">全国咖啡馆</a>
								</li>
								<li>
									<a href="#">活动展示</a>
								</li>
								<li>
									<a href="#">电子会员</a>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="index.html">
							<img src="img/logo.png" />
						</a>
					</li>
					<li>
						<a href="#">咖啡学院·S.I.T.coffee college</a>
						<span>
							/
						</span>
						<div class="nav-list">
							<ul>
								<li>
									<a href="College course_index.html">各地学院</a>
								</li>
								<li>
									<a href="#">学院课程</a>
								</li>
								<li>
									<a href="#">课程报名</a>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="#">咖啡·S.I.T</a>
						<div class="nav-list">
							<ul>
								<li>
									<a href="College course_index.html">品牌介绍</a>
								</li>
								<li>
									<a href="#">品牌历程</a>
								</li>
								<li>
									<a href="#">联系我们</a>
								</li>
								<li>
									<a href="#">寻求加盟</a>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--当季新品-->
		<div class="season">
			<div class="container">
				<h2>当季新品</h2>
				<span>IN THE NEW PRODUCT</span>
				<p>——— · ———</p>
				<div class="row">
					<div class="col-6 col-md-3">
						<img src="img/20171218054328244.png" />
						<h3>红丝绒拿铁</h3>
						<p></p>
						<span>红丝绒调配在香浓的牛奶与咖啡里，营造出了深红色的渐进色泽，美轮美奂。如何…</span>

					</div>
					<div class="col-6 col-md-3">
						<img src="img/20171218054405696.png" />
						<h3>圣诞摩卡帽</h3>
						<p></p>
						<span>红丝绒调配在香浓的牛奶与咖啡里，营造出了深红色的渐进色泽，美轮美奂。如何…</span>

					</div>
					<div class="col-6 col-md-3">
						<img src="img/20171218054506231.png" />
						<h3>红丝绒蛋糕</h3>
						<p></p>
						<span>红丝绒调配在香浓的牛奶与咖啡里，营造出了深红色的渐进色泽，美轮美奂。如何…</span>

					</div>
					<div class="col-6 col-md-3">
						<img src="img/20171218054545300.png" />
						<h3 class="text-center">虾仁培根炒饭</h3>
						<p></p>
						<span>红丝绒调配在香浓的牛奶与咖啡里，营造出了深红色的渐进色泽，美轮美奂。如何…</span>

					</div>
				</div>
			</div>
		</div>
		<!--时光会员-->
		<div class="time">
			<div class="container">
				<img src="img/user_tit.png" />
				<h4>时光会员</h4>
				<p>全新会员，余额、积分随时查，更有新人&生日好礼。会员专享福利</p>
				<a href="#">成为会员</a>
				<a href="#">会员详情</a>
			</div>
		</div>
		<!--学院课程-->
		<div class="course">
			<div class="container">
				<h2>学院课程</h2>
				<span>COLLEGE COURSES</span>
				<p>——— · ———</p>
				<div class="row">
					<div class="col-12 col-md-4">
						<div class="course_top">
							<img src="img/20170908053846524.png" />
							<div class="course_line">
								<h4>投创管理</h4>
							</div>
							<ul>
								<li>
									<span></span> 根据自身诉求确认咖啡馆走位
								</li>
								<li>
									<span></span> 国内不同业态咖啡馆分析
								</li>
								<li>
									<span></span> 咖啡投资预算分析及营收分析
								</li>
								<li>
									<span></span> 选址、设计、装修着重点解析
								</li>
							</ul>
							<a href="#">查看详情</a>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="course_top">
							<img src="img/20170908053736798.png" />
							<div class="course_line">
								<h4>咖啡公社</h4>
							</div>
							<ul>
								<li>
									<span></span> 咖啡种植传播历程及咖啡豆特性解析
								</li>
								<li>
									<span></span> 原产地单品咖啡品鉴，共享“精品咖啡”理念
								</li>
								<li>
									<span></span> 咖啡杯测基本规则与实际操作
								</li>
								<li>
									<span></span> 咖啡烘焙原理解析及烘焙观摩
								</li>
							</ul>
							<a href="#">查看详情</a>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="course_top">
							<img src="img/20170908053419875.png" />
							<div class="course_line">
								<h4>快乐厨房</h4>
							</div>
							<ul>
								<li>
									<span></span> 咖啡馆餐品定位及规划
								</li>
								<li>
									<span></span> 原物料采购及储存方法
								</li>
								<li>
									<span></span> 食材处理切配方法
								</li>
								<li>
									<span></span> 菜单及餐品设计方法
								</li>
							</ul>
							<a href="#">查看详情</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--门店展示-->
		<div class="shop">
			<div class="container">
				<h2>门店展示</h2>
				<span>STORE DISPLAY</span>
				<p>——— · ———</p>
			</div>
		</div>
		<div class="shop_line shop_left">
			<ul>
				<li>
					<p>
						<b>14</b> +
					</p>
					<p>华北地区门店</p>
				</li>
				<li>
					<p>
						<b>8</b> +
					</p>
					<p>中西地区门店</p>
				</li>
				<li>
					<p>
						<b>13</b> +
					</p>
					<p>东南地区门店</p>
				</li>
			</ul>
			<div class="shop_top">
				<span>北京12家</span>
				<span>河北1家</span>
				<span>陕西7家</span>
				<span>山东1家</span>
				<span>河南1家</span>
				<span>江苏5家</span>
				<span>上海1家</span>
				<span>贵州1家</span>
				<span>福建1家</span>
				<span>云南1家</span>
				<span>广东4家</span>
			</div>
			<div class="shop_right">
				<img src="img/icon_5.png"/>
				<span>已开通区域</span>
				<select name="">
					<option value="">北京</option>
					<option value="">南京</option>
					<option value="">扬州</option>
					<option value="">张家口</option>
					<option value="">郑州</option>
					<option value="">西安</option>
					<option value="">贵阳</option>
					<option value="">云南</option>
					<option value="">上海</option>
					<option value="">苏州</option>
					<option value="">青岛</option>
					<option value="">无锡</option>
				</select>
				<ul>
					<li>
						<a href="#">北师大店</a>
					</li>
					<li>
						<a href="#">工体店</a>
					</li>
					<li>
						<a href="#">麒麟社店</a>
					</li>
					<li>
						<a href="#">海图店（学院咖啡馆）</a>
					</li>
					<li>
						<a href="#">北苑店</a>
					</li>
					<li>
						<a href="#">腾讯店</a>
					</li>
					<li>
						<a href="#">西直门店</a>
					</li>
				</ul>
			</div>
		</div>
		<!--店-->
		<div class="college">
			<div class="row" id="col">
				<div class="col-12 col-md-3">
					<img src="img/20170911070517665.png"/>
					<div class="college_line">
						<a href="#">
							<h3>广州大学城店</h3>
							<p>地址：广州番禺区大学城中环西路230号广大商业中心C区2F</p>
						</a>
					</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="img/20170911070215822.jpg"/>
					<div class="college_line">
						<a href="#">
							<h3>无锡运河外滩店</h3>
							<p>地址：无锡市滨湖区湖滨路11号(万科金域蓝湾售楼处边上)</p>
						</a>
					</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="img/20170911070018148.png"/>
					<div class="college_line">
						<a href="#">
							<h3>扬州文昌店</h3>
							<p> 地址：扬州市汶河南路75号文昌广场工人文化宫2楼</p>
						</a>
					</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="img/20170911065706886.png"/>
					<div class="college_line">
						<a href="#">
							<h3>南京夫子庙店</h3>
							<p>地址：南京市秦淮区大石坝街32号（夫子庙东门）</p>
						</a>
					</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="img/20170911065746857.png"/>
					<div class="college_line">
						<a href="#">
							<h3>上海大学路店</h3>
							<p>地址：上海市杨浦区大学路105-107</p>
						</a>
					</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="img/20170911070352506.png"/>
					<div class="college_line">
						<a href="#">
							<h3>郑州郑大店</h3>
							<p>地址：郑州市高新区长椿路与翠竹街交叉口东北角盛和苑3号楼二楼（郑大东门对面）</p>
						</a>
					</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="img/20170911070433771.png"/>
					<div class="college_line">
						<a href="#">
							<h3>西安金桥店</h3>
							<p>地址：西安市高新区科技路55号（高新创业广场西侧）汉唐书城2楼</p>
						</a>
					</div>
				</div>
				<div class="col-12 col-md-3">
					<img src="img/20170831044520858.png"/>
					<div class="college_line">
						<a href="#">
							<h3>北京五道口店</h3>
							<p>地址：北京市海淀区成府路华清嘉园12号楼2号（五道口城铁出口处）</p>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!--活动展示-->
		<div class="course activity">
			<div class="container">
				<h2>活动展示</h2>
				<span>COLLEGE COURSES</span>
				<p>——— · ———</p>
				<div class="row">
					<div class="col-12 col-md-6">
						<ul>
							<li>
								<img src="img/20171215110144721.png"/>
								<h4 class="h6">时光宴会|你能想到的宴会，我们都可以实现</h4>
								<p>2017年已经不足一个月啦！年末大大小小的年会、派对即将袭来！还在为选不到心…</p>
								<a href="#">查看详情</a>
							</li>
						</ul>
					</div>
					<div class="col-12 col-md-6">
						<ul>
							<li>
								<img src="img/20171215110136481.png"/>
								<h4 class="h6">谁说圣诞节只有吃喝玩？今年的圣诞树我们自己做</h4>
								<p>冬天的冷风吹散了变黄的树叶路上的人们换上了厚实的外套但温暖并未褪去有花的…</p>
								<a href="#">查看详情</a>
							</li>
						</ul>
					</div>
					<div class="col-12 col-md-6">
						<ul>
							<li>
								<img src="img/20171215110125706.png"/>
								<h4 class="h6">有一种温暖，叫红丝绒</h4>
								<p>袅袅凉风动，一到冬天每个人都需要一些温暖的慰藉让人感觉舒适、感觉一瞬间活…</p>
								<a href="#">查看详情</a>
							</li>
						</ul>
					</div>
					<div class="col-12 col-md-6">
						<ul>
							<li>
								<img src="img/20171215105513940.png"/>
								<h4 class="h6">雕刻时光强势“进阶”：20周年再出发</h4>
								<p>2中国民族文艺咖啡第一品牌雕刻时光似乎从公众视野中消失了一段时间。过去三年…</p>
								<a href="#">查看详情</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--周边产品-->
		<div class="products">
			<div class="container">
				<h2>周边产品</h2>
				<span>PERIPHERAL PRODUCTS</span>
				<p>——— · ———</p>
				<div class="row">
					<ul>
					<li>
						<a href="#">
							<img src="img/20170831040127275.png"/>
							<p>精品咖啡豆</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/01.png"/>
							<p>印尼曼特宁咖啡豆</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/02.png"/>
							<p>意式阳光拼配咖啡豆</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/03.png"/>
							<p>美式挂耳现磨咖啡粉</p>
						</a>
					</li>
				</ul>
				</div>
			</div>
		</div>
		<!--页脚-->
		<footer>
			<div class="container">
				<div class="row">
					<div class="col-md-8">
						<ul>
							<li>
								<p>咖啡</p>
							</li>
							<li>
								<a href="#">当季新品</a>
							</li>
							<li>
								<a href="#">咖啡产品</a>
							</li>
							<li>
								<a href="#">周边展示</a>
							</li>
						</ul>
						<ul>
							<li>
								<p>咖啡馆</p>
							</li>
							<li>
								<a href="#">全国咖啡馆</a>
							</li>
							<li>
								<a href="#">活动展示</a>
							</li>
							<li>
								<a href="#">电子会员</a>
							</li>
						</ul>
						<ul>
							<li>
								<p>咖啡学院</p>
							</li>
							<li>
								<a href="#">各地学院</a>
							</li>
							<li>
								<a href="#">学院课程</a>
							</li>
							<li>
								<a href="#">课程报名</a>
							</li>
						</ul>
						<ul>
							<li>
								<p>关于我们</p>
							</li>
							<li>
								<a href="#">品牌介绍</a>
							</li>
							<li>
								<a href="#">品牌历程</a>
							</li>
							<li>
								<a href="#">联系我们</a>
							</li>
							<li>
								<a href="#">寻求加盟</a>
							</li>
						</ul>
						<ul>
							<li>
								<p>联系我们</p>
							</li>
							<li>
								<a href="#">品牌合作</a>
							</li>
							<li>
								<a href="#">展品合作</a>
							</li>
							<li>
								<a href="#">加盟我们</a>
							</li>
							<li>
								<a href="#">招聘</a>
							</li>
						</ul>
						<ul>
							<li>
								<p>地址</p>
							</li>
							<li>
								<a href="#">北京市海淀区西大街39号2层<br />（海淀创业大街内）</a>
							</li>
							<li>
								<p>电话</p>
							</li>
							<li>
								<span>400-050-1997</span>
							</li>
						</ul>
					</div>
					<div class="col-md-4">
						<div class="row">
							<div class="col-6">
								<img src="img/weib.png"/>
								<p>雕刻时光官方微博</p>
							</div>
							<div class="col-6">
								<img src="img/weix.png"/>
								<p>雕刻时光官方订阅号</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
		<div class="footer_bottom text-center">
			<div class="container">
				<p>
					Copyright © 2017北京艺丰雕刻时光咖啡文化有限责任公司. All Rights Reserved 京ICP备14037141号-1  技术支持 · 
					<a href="#">千寻卓越</a>
				</p>
			</div>
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
		<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/new_file1.js"></script>
	</body>
</html>
